<template>
  <div class="orderControl">
    <!-- 订单管理 -->
    <div class="consumerList">
      <div class="chooseContainer padding-box">
        <el-form ref="searchKey" :model="searchKey" :rules="rules" label-width="80px" :inline="true">
          <el-form-item label="空间名称" prop="spaceName">
            <el-input placeholder="请输入空间名称" v-model="searchKey.spaceName"></el-input>
          </el-form-item>
          <el-form-item label="订单编号" prop="orderId">
            <el-input placeholder="请输入订单编号" v-model="searchKey.orderId"></el-input>
          </el-form-item>
          <el-form-item label="客户姓名" prop="userName">
            <el-input placeholder="请输入客户姓名" v-model="searchKey.userName"></el-input>
          </el-form-item>
          <el-form-item label="客户电话" prop="userTel">
            <el-input placeholder="请输入客户电话" v-model="searchKey.userTel"></el-input>
          </el-form-item>
          <el-form-item label="订单类型" prop="type">
            <el-select v-model="searchKey.type" class="chooseBox" filterable placeholder="请选择订单类型" clearable>
              <el-option v-for="item in typeList" :key="item.value" :label="item.text" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="取景状态" prop="shootingState">
            <el-select v-model="searchKey.shootingState" class="chooseBox" filterable placeholder="请选择取景状态" clearable>
              <el-option v-for="item in shootingStateList" :key="item.value" :label="item.text" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单状态" prop="status">
            <el-select v-model="searchKey.status" class="chooseBox" filterable placeholder="请选择订单状态" clearable>
              <el-option v-for="item in statusList" :key="item.value" :label="item.text" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-form-item label="时间类型" prop="option">
              <el-select v-model="searchKey.option" class="chooseBox" filterable placeholder="请选择时间类型" clearable>
                <el-option v-for="item in optionList" :key="item.value" :label="item.text" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-form-item prop="startTime">
                <el-date-picker v-model="searchKey.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择开始日期" default-time="00:00:00">
                </el-date-picker>
              </el-form-item>
              <el-form-item prop="endTime">
                <el-date-picker v-model="searchKey.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择结束日期" default-time="23:59:59">
                </el-date-picker>
              </el-form-item>
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchOrder">搜索</el-button>
            <el-button @click="searchClear('searchKey')">重置</el-button>
            <!-- <el-button @click="exportOrder">导出订单</el-button> -->
          </el-form-item>
        </el-form>
        <div class="btnBox">
        </div>
      </div>
      <div class="padding-box">
        <el-table :data="orderData" style="width: 100%" v-loading="loadingTable" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)" empty-text="没有搜索到相关订单">
          <el-table-column prop="orderNum" label="订单编号" align="center">
          </el-table-column>
          <el-table-column prop="type" label="订单类型" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.type === 1">普通订单</span>
              <span v-if="scope.row.type === 2">特价订单</span>
              <span v-if="scope.row.type === 3">活动订单</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="购买时间" align="center">
          </el-table-column>
          <!-- <el-table-column prop="payTime" label="付款时间" align="center">
          </el-table-column> -->
          <el-table-column prop="userName" label="客户" align="center">
          </el-table-column>
          <el-table-column prop="userTel" label="电话" align="center">
          </el-table-column>
          <el-table-column prop="spaceName" label="空间名称" align="center">
          </el-table-column>
          <el-table-column prop="payMoney" label="实际支付" align="center">
          </el-table-column>
          <el-table-column label="金额包含" align="center">
            <template slot-scope="scope">
              <!-- <img style="width:60px;height:60px" :src="scope.row.photo"/> -->
              <span>拍摄费用:{{scope.row.shootMoney}}</span><br>
              <span>食宿费用:{{scope.row.payMoney-scope.row.shootMoney}}</span>
            </template>
          </el-table-column>
          <el-table-column label="拍摄日期" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.type === 1">{{scope.row.shootDate}}&nbsp;({{scope.row.beginTime}}~{{scope.row.endTime}})</span>
              <span v-if="scope.row.type === 2">{{scope.row.shootValidity}}</span>
              <span v-if="scope.row.type === 3">2018-12-20~2019-12-20</span>
            </template>
          </el-table-column>
          <el-table-column label="空间确认状态" prop="storeState" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.status === '1'" style="width:60px;margin:0 auto;">
                <div v-if="scope.row.storeState === 1" style="width:60px;margin:0 auto;">
                  <el-button type="text" @click="OK(scope.row)" size="mini">确认</el-button>
                  <el-button type="text" @click="NO(scope.row)" size="mini">取消</el-button>
                </div>
                <!-- <div v-if="scope.row.storeState === 2" style="width:60px;margin:0 auto;">
                  <span>已确认</span>
                </div>
                <div v-if="scope.row.storeState === 3" style="width:60px;margin:0 auto;">
                  <span>已取消</span>
                </div> -->
              </div>
              <div v-if="scope.row.status === '2'" style="width:60px;margin:0 auto;">
                <div v-if="scope.row.storeState === 2" style="width:60px;margin:0 auto;">
                  <span>已确认</span>
                </div>
              </div>
              <div v-if="scope.row.status === '3'" style="width:60px;margin:0 auto;">
                <div v-if="scope.row.storeState === 2" style="width:60px;margin:0 auto;">
                  <span>已确认</span>
                </div>
              </div>
              <div v-if="scope.row.status === '4'" style="width:60px;margin:0 auto;">
                <!-- <div v-if="scope.row.storeState === 2" style="width:60px;margin:0 auto;"> -->
                <span>已确认</span>
                <!-- </div> -->
              </div>
              <div v-if="scope.row.status === '5'" style="width:60px;margin:0 auto;">
                <div v-if="scope.row.storeState === 3" style="width:60px;margin:0 auto;">
                  <span>已取消</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="订单状态" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.status === '0'" style="width:60px;margin:0 auto;">
                <span>未付款</span>
              </div>
              <div v-if="scope.row.status === '1'" style="width:60px;margin:0 auto;">
                <span>待确认</span>
              </div>
              <div v-if="scope.row.status === '2'" style="width:60px;margin:0 auto;">
                <span>待拍摄</span>
              </div>
              <div v-if="scope.row.status === '3'" style="width:60px;margin:0 auto;">
                <span>已完成</span>
              </div>
              <div v-if="scope.row.status === '4'" style="width:60px;margin:0 auto;">
                <span>已评价</span>
              </div>
              <div v-if="scope.row.status === '5'" style="width:60px;margin:0 auto;">
                <span>已取消</span>
              </div>
              <div v-if="scope.row.status === '6'" style="width:60px;margin:0 auto;">
                <span>商家取消，待退款</span>
              </div>
              <div v-if="scope.row.status === '7'" style="width:60px;margin:0 auto;">
                <span>已退款</span>
              </div>
              <div v-if="scope.row.status === '8'" style="width:60px;margin:0 auto;">
                <span>商家超时已取消</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="80" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="seeDetail(scope.row)" size="mini">查看详情</el-button>
              <!-- <el-button type="text" size="mini" @click="deleteConsumer(scope.row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="pageContainer" style="padding-bottom:30px">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="this.pageSizeArray" :page-size="this.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="this.total">
          </el-pagination>
        </div>
        <el-dialog title="订单状态确认" :visible.sync="dialogVisible" :modal="zhezhao" width="30%">
          <span>是否确认订单</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible=false">取消</el-button>
            <el-button type="primary" @click="OK1">确定</el-button>
          </span>
        </el-dialog>
        <el-dialog title="订单状态确认" :visible.sync="dialogVisible1" :modal="zhezhao" width="30%">
          <span>是否取消订单</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible1=false">取消</el-button>
            <el-button type="primary" @click="NO1">确定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    <version></version>
  </div>
</template>
<script type="text/ecmascript-6">
// import { pageCommon } from '@/assets/js/mixin'
import version from '@/base/version/version'
import { mapGetters } from 'vuex'
export default {
  name: 'orderControl',
  components: {
    version
  },
  // mixins: [pageCommon],
  data () {
    return {
      dialogVisible: false,
      dialogVisible1: false,
      zhezhao: false,
      pageSizeArray: [10, 20, 30, 40, 50],
      pageNo: 1,
      pageSize: 10,
      pageTotal: null,
      loadingList: false,
      total: 0,
      loadingTable: true,
      isFirstdata: false,
      isShowPage: true,
      typeList: [
        {
          text: '常规订单',
          value: 1
        },
        {
          text: '特价订单',
          value: 2
        },
        {
          text: '活动订单',
          value: 3
        }
      ],
      shootingStateList: [
        {
          text: '未完成',
          value: 0
        },
        {
          text: '已完成',
          value: 1
        }
      ],
      statusList: [
        {
          text: '未付款',
          value: 0
        },
        {
          text: '待确认',
          value: 1
        },
        {
          text: '待拍摄',
          value: 2
        },
        {
          text: '已完成',
          value: 3
        },
        {
          text: '已评价',
          value: 4
        },
        {
          text: '已取消',
          value: 5
        },
        {
          text: '商家取消，待退款',
          value: 6
        },
        {
          text: '已退款',
          value: 7
        },
        {
          text: '商家超时已取消',
          value: 8
        }
      ],
      optionList: [
        {
          text: '付款时间',
          value: 1
        },
        {
          text: '取景时间',
          value: 2
        }
      ],
      searchKey: {
        spaceName: '',
        orderId: '',
        userName: '',
        userTel: '',
        type: '',
        shootingState: '',
        status: '',
        option: '',
        startTime: '',
        endTime: ''
      },
      orderData: [
      ],
      rules: {}
    }
  },
  created () {
    // this.getOrderList()
    // console.log(this.$route.query.spaceId)
    this.role = this.userInfo.roleId
    // console.log(this.userInfo.userId)
    if (!this.noReadayLoading) {
      this.searchBtn()
    }
  },
  watch: {
    pageSize (newVal, oldVal) {
      if (this.pageTotal > newVal) {
        this.searchBtn()
        return false
      }
      if (this.pageTotal < oldVal) {
        return false
      }
      this.searchBtn()
    },
    total (val) {
      if (val === 1) {
        this.isShowPage = false
      } else {
        this.isShowPage = true
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    // 修改每页显示的数据数目
    handleSizeChange (val) {
      this.pageSize = val
      this.searchBtn()
    },
    // 设置pageNo
    handleCurrentChange (val) {
      this.pageNo = val
      this.searchBtn()
    },
    OK (row) {
      this.dialogVisible = true
      this.id = row.id
      this.storeState = row.storeState
    },
    OK1 () {
      this.$axios.post('/api/order/confirm', {
        userId: this.userInfo.userId,
        operation: 1,
        id: this.id
      }).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.searchBtn()
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
      this.dialogVisible = false
      this.searchBtn()
    },
    NO (row) {
      this.dialogVisible1 = true
      this.id = row.id
    },
    NO1 () {
      this.$axios.post('/api/order/confirm', {
        userId: this.userInfo.userId,
        operation: 2,
        id: this.id
      }).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.searchBtn()
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
      this.dialogVisible1 = false
      this.getOrderList()
    },
    seeDetail (row) {
      console.log(row.id)
      this.$router.push({ name: 'orderControl/orderDetail', query: { id: row.id } })
    },
    searchBtn () {
      this.$axios.post('/api/order/showOrdersByCondition',
        {
          userId: this.userInfo.userId,
          orderId: this.searchKey.orderId,
          spaceName: this.searchKey.spaceName,
          userName: this.searchKey.userName,
          userTel: this.searchKey.userTel,
          type: this.searchKey.type,
          shootingState: this.searchKey.shootingState,
          status: this.searchKey.status,
          option: this.searchKey.option,
          startTime: this.searchKey.startTime,
          endTime: this.searchKey.endTime,
          pageSize: this.pageSize,
          pageNo: this.pageNo
        }
      ).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          this.loadingTable = false
          let arr = res.results
          console.log(arr)
          let orderList = []
          for (let i = 0; i < arr.length; i++) {
            orderList.push({
              id: arr[i].id,
              beginTime: arr[i].beginTime,
              endTime: arr[i].endTime,
              shootDate: arr[i].shootDate,
              createTime: arr[i].createTime,
              payTime: arr[i].payTime,
              type: arr[i].type,
              orderNum: arr[i].orderNum,
              payType: arr[i].payType,
              payMoney: arr[i].payMoney,
              repastMoney: arr[i].repastMoney,
              roomMoney: arr[i].roomMoney,
              shootingState: arr[i].shootingState,
              spaceName: arr[i].spaceName,
              status: arr[i].status,
              storeState: arr[i].storeState,
              userName: arr[i].userName,
              userTel: arr[i].userTel,
              shootValidity: arr[i].shootValidity,
              shootMoney: arr[i].shootMoney
            })
          }
          this.orderData = [...orderList]
          this.total = res.total
        }
      })
    },
    searchOrder () {
      this.$axios.post('/api/order/showOrdersByCondition',
        {
          userId: this.userInfo.userId,
          orderId: this.searchKey.orderId,
          spaceName: this.searchKey.spaceName,
          userName: this.searchKey.userName,
          userTel: this.searchKey.userTel,
          type: this.searchKey.type,
          shootingState: this.searchKey.shootingState,
          status: this.searchKey.status,
          option: this.searchKey.option,
          startTime: this.searchKey.startTime,
          endTime: this.searchKey.endTime,
          pageSize: this.pageSize,
          pageNo: 1
        }
      ).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          this.loadingTable = false
          let arr = res.results
          console.log(arr)
          let orderList = []
          for (let i = 0; i < arr.length; i++) {
            orderList.push({
              id: arr[i].id,
              beginTime: arr[i].beginTime,
              endTime: arr[i].endTime,
              shootDate: arr[i].shootDate,
              createTime: arr[i].createTime,
              payTime: arr[i].payTime,
              type: arr[i].type,
              orderNum: arr[i].orderNum,
              payType: arr[i].payType,
              payMoney: arr[i].payMoney,
              repastMoney: arr[i].repastMoney,
              roomMoney: arr[i].roomMoney,
              shootingState: arr[i].shootingState,
              spaceName: arr[i].spaceName,
              status: arr[i].status,
              storeState: arr[i].storeState,
              userName: arr[i].userName,
              userTel: arr[i].userTel,
              shootValidity: arr[i].shootValidity,
              shootMoney: arr[i].shootMoney
            })
          }
          this.orderData = [...orderList]
          this.total = res.total
        }
      })
    },
    searchClear (searchKey) {
      this.$nextTick(() => {
        if (this.$refs[searchKey] !== undefined) {
          this.$refs[searchKey].resetFields()
        }
        this.searchBtn()
      })
    },
    dateFormat (row, column) {
      var date = row.createTime.substring(0, 10) + ' ' + row.createTime.substring(11, 19)
      return date
    },
    dateFormatpay (row, column) {
      if (row.payTime !== null) {
        var date = row.payTime.substring(0, 10) + ' ' + row.payTime.substring(11, 19)
      }
      return date
    },
    exportOrder () { }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../../assets/stylus/variable'
.chooseContainer
  background $bg-normal
  overflow hidden
  display flex
  width 100%
  padding $spacing
  padding-bottom 20px
  flex-wrap wrap
  box-sizing border-box
  .chooseBox
    flex 0 0 224px
    margin-right $spacing
    margin-bottom $spacing
</style>
